<template>
  <div style="vertical-align: middle;" v-if="mianData.tableSign">
    <el-checkbox :label="mianData.EN" class="outche">
      <!-- 非编辑状态 -->
      <div v-show="switch_N" class="che">{{ContrastData[mianData.EN]}}</div>
      <!-- 编辑状态 -->
      <div v-show="!switch_N" class="che">
        <el-input class="inp" v-model="ContrastData[mianData.EN]" size="mini" placeholder="请输入内容"></el-input>
      </div>
      <div class="icon">
        <!-- 编辑 -->
        <i class="el-icon-s-tools" v-if="switch_N" @click.prevent="setCheckFun"></i>
        <!-- 确定编辑 -->
        <i class="el-icon-success" v-if="!switch_N" @click.prevent="saveCheckFun(mianData.EN)"></i>
        <!-- 顺序上移/下移 改变祖父组件表格显示顺序-->
        <span>
          <!-- 向上到头了 -->
           <i class="el-icon-minus" v-if="indexs==0" @click.prevent=""></i>
          <!-- 上 -->
          <i class="el-icon-caret-top" v-if="indexs!=0" @click.prevent="upFun(indexs)"></i>
          <!-- 下 -->
          <i class="el-icon-caret-bottom" v-if="!(indexs==CGData['length']-1)" @click.prevent="downFun(indexs)"></i>
          <!-- 向下到头了 -->
          <i class="el-icon-minus" v-if="(indexs==CGData['length']-1)" @click.prevent=""></i>
        </span>
      </div>
    </el-checkbox>
  </div>
</template>
<script>
export default {
  props: ["mainList", "tableContrast","indexs","CGData"],
  data() {
    return {
      mianData: {},
      ContrastData: {},
      switch_N: true
    };
  },
  watch:{
    mainList:{ //深度监听改变组件显示内容 
      deep:true,
      handler(newvalue,oldvalue){
        this.mianData = JSON.parse(JSON.stringify(this.mainList));
      }
    },
  },
  created() {
    this.mianData = JSON.parse(JSON.stringify(this.mainList));
    this.ContrastData = JSON.parse(JSON.stringify(this.tableContrast));
  },
  methods: {
    //编辑
    setCheckFun() {
      console.log("编辑");
      this.switch_N = false;
    },
    //保存编辑
    saveCheckFun(fontEN) {
      console.log("保存");
      //console.log(fontEN)
      this.switch_N=true
      this.$emit("goSecondFloor", this.ContrastData,fontEN); //导出编辑好的表头名
    },
    //向上挪动一项
    upFun(indexs) {
      // console.log("向上挪动一项");
      // console.log(this.tableContrast)
      this.$emit('toUp',indexs)
    },
    //向下挪动一项
    downFun(indexs) {
      // console.log("向下挪动一项");
      // console.log(this.tableContrast)
      this.$emit('toDown',indexs)
    }
  }
};
</script>
<style lang="scss" scoped>
.outche {
  vertical-align: middle;
  height: 25px;
  line-height: 25px;
}
.che {
  display: inline-block;
  width: 130px;
  .inp {
    width: 130px;
  }
}
.icon {
  float: right;
  .order {
    display: flex;
    flex-direction: column;
    border: 1px solid darkblue;
  }
}
</style>